import React, { useState } from "react";
// import classNames from "classnames";

interface BaseLoadingProps {
  strokeWidthOuter?: number | string;
  strokeWidthInner?: number | string;
  strokeInner?: string;
  strokeOuter?: string;
  isLoading?: boolean;
}
type NativeLoadingProps = BaseLoadingProps & React.SVGAttributes<Element>;

//Partial可以把所有属性设置为可选
export type LoadingProps = Partial<NativeLoadingProps>;

export const Loading: React.FC<LoadingProps> = (props) => {
  const {
    className,
    strokeWidthOuter,
    children,
    strokeOuter,
    strokeInner,
    strokeWidthInner,
    fill,
    opacity,
    stroke,
    dur,
    isLoading,
    ...restProps
  } = props;


  const styles = {
    display: isLoading ? "flex" : "none",
  };
  return (
    <div className="coerger-loading" style={styles}>
      <svg {...restProps} className={className} fill="none">
        <circle
          cx={25}
          cy={25}
          r="22"
          stroke={strokeOuter}
          strokeWidth={strokeWidthOuter}
          // 分割成四份
          // 2πr/4 = 2*3.1415926*22/4
          strokeDasharray={34}
          strokeLinecap="round"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 25 25"
            to="360 25 25"
            values="0 25 25;360 25 25"
            dur={dur}
            fill="none"
            repeatCount="indefinite"
          ></animateTransform>
          <animate
            attributeName="stroke"
            values="#3b36cb;#02bcfe;#3be6cb"
            dur={dur}
            repeatCount="indefinite"
          ></animate>
        </circle>
        <circle
          cx={25}
          cy={25}
          r="12"
          fill="none"
          strokeWidth={strokeWidthInner}
          stroke={strokeInner}
          strokeDasharray={19}
          strokeLinecap="round"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="360 25 25"
            to="0 25 25"
            dur={dur}
            repeatCount="indefinite"
          ></animateTransform>
          <animate
            attributeName="stroke"
            values="#02bcfe;#3be6cb;#3b36cb"
            dur="2s"
            repeatCount="indefinite"
          ></animate>
        </circle>
      </svg>
      {children}
    </div>
  );
};

Loading.defaultProps = {
  width: "100",
  height: "100",
  preserveAspectRatio: "xMidYMid meet",
  viewBox: "0 0 50 50",
  strokeWidthOuter: "3",
  strokeWidthInner: "3",
  strokeOuter: "#3be6cb",
  strokeInner: "#02bcfe",
  dur: "1.5s",
  isLoading: true,
};
export default Loading;
